<template>
  <div>
    <p>{{ item.name }}</p>
    <p>{{val}}</p>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  data () {
      return {
          val:0
      }
  },
  watch:{
      'item.id' () {
          this.handle1();
      }
  },
  mounted() {
    this.handle1();
  },
  methods: {
    handle1() {
      switch (this.item.id) {
        case 1:
          this.val = 1;
          break;
        case 2:
          this.val = 2;
          break;
        case 3:
          this.val = 3;
          break;
        case 4:
          this.val = 4;
          break;
      }
    },
  },
};
</script>